/*
 * @Author: 史许荣
 * @Date: 2022-08-01 10:57:57
 * @LastEditors: 史许荣
 * @LastEditTime: 2022-08-04 10:24:36
 * @Description: file content
 * @FilePath: \react-three-fiber-new\src\HeatMap.js
 */
import * as THREE from 'three'
import React, { useEffect, useMemo, useRef } from 'react'
import { extend, useThree } from '@react-three/fiber'
import { shaderMaterial, useTexture } from '@react-three/drei'
import glsl from 'babel-plugin-glsl/macro'
import h337 from 'heatmap.js';




export default function HeatMap({ position }) {
    const { heatMap, greyMap } = useMemo(() => {
        let heatMap1 = h337.create({
            container: document.getElementById('heatmap'),
            blur: 0.8,
            radius: 30,
            gradient: { .65: "rgb(0,255,0)", .8: "yellow", 1: "rgb(255,0,0)" }
        });
        let points = [{
            x: 200,
            y: 200,
            value: 1
        }, {
            x: 180,
            y: 220,
            value: 0.5
        }, {
            x: 215,
            y: 215,
            value: 0.8
        }, {
            x: 240,
            y: 240,
            value: 0.65
        }, {
            x: 200,
            y: 220,
            radius: 10,
            value: .5
        }, {
            x: 220,
            y: 200,
            radius: 10,
            value: .5
        }, {
            x: 180,
            y: 200,
            radius: 10,
            value: .5
        }, {
            x: 200,
            y: 180,
            radius: 10,
            value: 0.3
        }, {
            x: 180,
            y: 180,
            value: .5
        }];

        heatMap1.setData({
            min: 0,
            max: 1,
            data: points
        });
        // 灰度图
        let greyMap1 = h337.create({
            container: document.getElementById('greymap'),
            gradient: {
                '0': 'black',
                '1.0': 'white'
            }
        });

        greyMap1.setData({
            min: 0,
            max: 0.8,
            data: points
        });


        let texture = new THREE.Texture(heatMap1._config.container.children[0]);
        texture.needsUpdate = true;
        let texture2 = new THREE.Texture(greyMap1._config.container.children[0]);
        texture2.needsUpdate = true;
        return { heatMap: texture, greyMap: texture2 }
    })
    return (<group >
        <mesh occlude position={position} rotation={[-Math.PI / 2, 0, 0]}>
            <planeBufferGeometry args={[25, 25, 100, 100]} />

            <heatMapMaterial
                transparent={true}
                opacity={1}
                blending={THREE.AdditiveBlending}
                side={THREE.DoubleSide}
                heatMap={heatMap}
                greyMap={greyMap}
            />
        </mesh>

    </group>
    )
}


extend({
    HeatMapMaterial: shaderMaterial(
        {
            heatMap: undefined,
            greyMap: undefined,
            Zscale: 2,
            u_color: new THREE.Color('rgb(255, 255, 255)'),
            u_opacity: 0.8
        },
        glsl`varying vec2 vUv;
        uniform float Zscale;
        uniform sampler2D greyMap;
        void main() {
            vUv = uv;
            vec4 frgColor = texture2D(greyMap, uv);//获取灰度图点位信息
            float height = Zscale * frgColor.a;//通过灰度图的rgb*需要设置的高度计算出热力图每个点位最终在z轴高度
            vec3 transformed = vec3( position.x, position.y, height);//重新组装点坐标
            gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);//渲染点位
        }`,
        glsl`#ifdef GL_ES
    precision highp float;
    #endif
    varying vec2 vUv;
    uniform sampler2D heatMap;
    uniform vec3 u_color;//基础颜色
    uniform float u_opacity; // 透明度
    void main() {
      //vec4 alphaColor = texture2D(heatMap, vUv);
      // gl_FragColor = alphaColor;
       gl_FragColor = vec4(u_color, u_opacity) * texture2D(heatMap, vUv);
    }
`
    )
})
